import TaroSafeAreaView from "@src/components/safe-area-view";
import TaroStatusBar from "@src/components/status-bar";
import {  openCropper } from "react-native-image-crop-picker";
import { Image, ScrollView, Swiper, SwiperItem,View,Text } from "@tarojs/components";
import React,{ useState,useCallback } from "react";
import Taro from "@tarojs/taro";
import { useSystemInfo } from "@src/hooks";
import { useAppDispatch, useAppSelector } from "@src/store";
import "./index.scss";
import { replaceMediaChoosed } from "@src/store/globalData";
import MediaNavBar from "@src/components/media-nav-bar";

export default function PreviewImage(props) {
    const { imageChoosed } = useAppSelector(state=>state.globalData);
    const [current,setCurrent] = useState(0);
    const dispath = useAppDispatch();
    const handleSwiperChange = useCallback((event)=>{
        const current = event.detail.current;
        setCurrent(current);
    },[]);
    const handleEditPhoto = useCallback((path:string)=>{
        openCropper({
            path,
            mediaType:"photo",
            cropperStatusBarColor:"black",
            cropperToolbarTitle:"编辑照片",
            cropperToolbarWidgetColor:"black",
            cropperActiveWidgetColor:"black",
            cropperTintColor:"black",
            showCropGuidelines:false,
        }).then(res=>{
            const index = imageChoosed.findIndex(media=>media.uri == path);
            dispath(replaceMediaChoosed({
                media:{ uri:res.path,type:"image" },
                index
            }));
        });
    },[dispath,imageChoosed]);

    const handleClickNext = useCallback(()=>{
        // 如果路由栈里存在发布页面，直接跳过去
        const pageStack = Taro.getCurrentPages();
        const matchPageIndex = pageStack.findIndex(page=>{
            return page.config.pagePath === "/pages/publish/index";
        });
        console.log(pageStack,matchPageIndex);
        if(matchPageIndex >= 0){
            Taro.navigateBack({
                delta:pageStack.length - matchPageIndex - 1
            });
            return;
        }
        Taro.navigateTo({
            url:"/pages/publish/index"
        });
    },[]);
    const { screenHeight } = useSystemInfo();
    return (
        <TaroSafeAreaView edges={["top","bottom","left","right"]} style={{ backgroundColor:"black",position:"absolute",top:0,bottom:0 }}>
            <TaroStatusBar barStyle="light-content" backgroundColor="rgba(0,0,0,0)" translucent />
                <MediaNavBar next={handleClickNext} canNext>
                    <Text>{current + 1}/{imageChoosed.length}</Text>
                </MediaNavBar>
            <Swiper className="preview" style={{ height:screenHeight - 144 }} current={current} onChange={handleSwiperChange}>
                {imageChoosed.map((image) => <SwiperItem key={`swiperItem_${image.uri}`} >
                    <View className="preview__item__imageWrapper">
                        <Image src={image.uri} className="preview__item__image" mode="aspectFit" />
                    </View>
                    <View onClick={()=>{
                        handleEditPhoto(image.uri);
                    }} className="preview__item__editBtn"
                    >编辑照片</View>
                </SwiperItem>)}
            </Swiper>
            <ScrollView scrollX style={{ height:100,alignItems:"center" }}>
                {
                    imageChoosed.map((image,index) => <Image onClick={()=>{
                        setCurrent(index);
                    }} src={image.uri} key={`preview_${image.uri}`} className={`preview__thumb ${current === index ? "preview__thumb--actived" : ""}`} mode="aspectFill"
                    />)
                }
            </ScrollView>
        </TaroSafeAreaView>
    );
}